<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 800px;
				height: 600px;
				margin: 0 auto;
				/*border: 1px solid black;*/
				
			}
			
			.pic_box{
				height: 300px;
				width: 500px;
				margin: 150px auto;
				/*border: 1px solid black;*/
				position: relative;
				transform-style: preserve-3d;
				/*transform: rotateX(-15deg);*/
				animation: box_rotate 3s infinite linear;
			}
			
			.pic{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 100px;
				left: 200px;
				text-align: center;
			}
			
			.pic_box:hover{
				animation-play-state: paused;
			}
			
			.pic img{
				width: 100%;
				height: 100px;
			}
			
			.pic_box>div:nth-of-type(1){
				animation: pic_rotate_chun 1s forwards;
			}
			
			.pic_box>div:nth-of-type(2){
				animation: pic_rotate_xia 1s forwards;
			}
			
			.pic_box>div:nth-of-type(3){
				animation: pic_rotate_qiu 1s forwards;
			}
			
			.pic_box>div:nth-of-type(4){
				animation: pic_rotate_dong 1s forwards;
			}
		
			@keyframes box_rotate{
				0%{
					transform: rotateX(0deg) rotateY(0deg);
				}
				100%{
					transform: rotateX(0deg) rotateY(360deg);
				}
			}
			
			@keyframes pic_rotate_chun{
				0%{
					transform: rotateY(0deg) translateZ(0px);
				}
				100%{
					transform: rotateY(0deg) translateZ(100px);
				}
			}
			
			@keyframes pic_rotate_xia{
				0%{
					transform: rotateY(0deg) translateZ(0px);
				}
				100%{
					transform: rotateY(90deg) translateZ(100px);
				}
			}
			
			@keyframes pic_rotate_qiu{
				0%{
					transform: rotateY(0deg) translateZ(0px);
				}
				100%{
					transform: rotateY(180deg) translateZ(100px);
				}
			}
			
			@keyframes pic_rotate_dong{
				0%{
					transform: rotateY(0deg) translateZ(0px);
				}
				100%{
					transform: rotateY(270deg) translateZ(100px);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="pic_box">
				<div class="pic">
					春
					<img src="../images/春.jpg"/>
					
				</div>
				
				<div class="pic">
					夏
					<img src="../images/夏.jpg"/>
				</div>
				
				<div class="pic">
					秋
					<img src="../images/秋.jpg"/>
				</div>
				
				<div class="pic">
					冬
					<img src="../images/冬.jpg"/>
				</div>
			</div>
		</div>
	</body>
</html>
